<template>
  <div class="search-products-wrapper">
    <div class="search-header">
      <h1 class="search-title">搜索结果</h1>
      <p class="search-keyword">搜索关键词：{{ searchKeyword }}</p>
      <el-button 
        type="primary" 
        icon="el-icon-refresh" 
        size="small" 
        class="refresh-btn"
        @click="refreshSearch"
        :loading="loading"
      >
        刷新结果
      </el-button>
    </div>
    <div class="products-section">
      <div class="products-header">
        <span class="products-tips">共找到 {{ products.length }} 个相关商品</span>
        <span class="search-time">最后更新时间：{{ lastUpdateTime }}</span>
      </div>
      <el-row :gutter="32" v-loading="loading">
        <el-col :span="6" v-for="product in products" :key="product.productId">
          <el-card class="product-card" :body-style="{ padding: '0px', background: '#fff' }">
            <div class="product-image-box">
              <img :src="getProductImage(product)" class="product-image">
            </div>
            <div class="product-info">
              <h3 class="product-title">{{ product.title }}</h3>
              <div class="product-meta">
                <span class="publisher">发布者: {{ product.userNickname }}</span>
              </div>
              <div class="product-bottom">
                <span class="price">¥{{ product.price }}</span>
                <span class="product-status" :class="getStatusClass(product.status)">{{ product.status }}</span>
              </div>
              <el-button type="primary" size="mini" @click.stop="goToDetail(product.productId)" class="detail-btn">查看详细</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div v-if="!loading && products.length === 0" class="empty-container">
        <el-empty description="未找到相关商品"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import ProductService from '@/Services/ProductService'

export default {
  name: 'ProductsSearchView',
  data() {
    return {
      products: [],
      loading: false,
      lastUpdateTime: '未更新'
    }
  },
  computed: {
    searchKeyword() {
      return this.$route.query.keyword || ''
    }
  },
  created() {
    this.fetchSearchResults()
  },
  methods: {
    async fetchSearchResults() {
      if (!this.searchKeyword) {
        this.products = []
        this.lastUpdateTime = new Date().toLocaleString()
        return
      }
      this.loading = true
      try {
        const response = await ProductService.Search(this.searchKeyword)
        if (response && response.data) {
          this.products = Array.isArray(response.data) ? response.data : response.data.$values || []
        } else {
          this.products = []
        }
        this.lastUpdateTime = new Date().toLocaleString()
      } catch (error) {
        this.products = []
        this.$message.error('搜索商品失败')
        this.lastUpdateTime = new Date().toLocaleString()
      } finally {
        this.loading = false
      }
    },
    refreshSearch() {
      this.fetchSearchResults()
      this.$message.success('搜索结果已更新')
    },
    getProductImage(product) {
      if (product.imageBase64) {
        return `data:image/jpeg;base64,${product.imageBase64}`
      }
      return 'https://picsum.photos/300/200?random=' + Math.random()
    },
    getStatusClass(status) {
      switch (status) {
        case '在售':
          return 'status-onsale'
        case '已售出':
          return 'status-sold'
        case '已下架':
          return 'status-offline'
        default:
          return ''
      }
    },
    goToDetail(id) {
      this.$router.push({ name: 'ProductDetail', params: { id } })
    }
  },
  watch: {
    // 监听路由参数变化，重新获取搜索结果
    '$route.query.keyword': {
      handler() {
        this.fetchSearchResults()
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.search-products-wrapper {
  min-height: 100vh;
  background: #f7f8fa;
  padding: 40px 0 60px 0;
}
.search-header {
  margin-bottom: 30px;
  text-align: center;
}
.search-title {
  font-size: 28px;
  color: #333;
  font-weight: 600;
  margin: 0;
  padding: 20px 0 0 0;
}
.search-keyword {
  font-size: 16px;
  color: #666;
  margin-top: 12px;
}
.refresh-btn {
  margin-top: 12px;
  background-color: #ffd700;
  border-color: #ffd700;
  color: #333;
  border-radius: 8px;
  font-weight: 600;
  border: none;
}
.products-section {
  max-width: 1300px;
  margin: 0 auto;
  background: transparent;
}
.products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}
.products-tips {
  font-size: 18px;
  color: #222;
  font-weight: 500;
}
.search-time {
  color: #999;
  font-size: 14px;
}
.product-card {
  margin-bottom: 32px;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  transition: transform 0.25s, box-shadow 0.25s;
  overflow: hidden;
  border: none;
}
.product-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
}
.product-image-box {
  width: 100%;
  height: 220px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f0f0f0;
}
.product-image {
  max-width: 90%;
  max-height: 200px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  background: transparent;
}
.product-info {
  padding: 18px 18px 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.product-title {
  font-size: 18px;
  color: #222;
  font-weight: 600;
  margin: 0 0 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.product-meta {
  font-size: 14px;
  color: #888;
  margin-bottom: 10px;
  width: 100%;
}
.publisher {
  color: #888;
}
.product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}
.price {
  color: #f56c6c;
  font-weight: bold;
  font-size: 18px;
}
.product-status {
  font-size: 13px;
  padding: 2px 10px;
  border-radius: 6px;
  margin-left: 8px;
  display: inline-block;
  font-weight: 500;
}
.status-onsale {
  background-color: #67C23A;
  color: white;
}
.status-sold {
  background-color: #F56C6C;
  color: white;
}
.status-offline {
  background-color: #909399;
  color: white;
}
.detail-btn {
  width: 100%;
  margin-top: 4px;
  border-radius: 8px;
  font-weight: 600;
}
.empty-container {
  padding: 40px;
  text-align: center;
  background: #fff;
  margin-top: 20px;
  border-radius: 4px;
}
</style> 